<template>
  <view class="movie-list-container">
    <text class="message-text">{{ content }}</text>
    <view class="movie-list">
      <view 
        v-for="(movie, index) in movieList" 
        :key="index"
        class="movie-item"
        @click="handleMovieClick(movie)">
        <view class="movie-info">
          <view class="movie-name">🎬 {{ getMovieName(movie) }}</view>
          <view class="movie-url">{{ movie.url }}</view>
        </view>
        <view class="download-icon">
          <uni-icons type="download" size="18" color="#007aff"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MovieList',
  props: {
    content: {
      type: String,
      default: ''
    },
    movieList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getMovieName(movie) {
      if (movie.name && movie.name.trim() !== '') {
        return movie.name
      }
      
      if (movie.id) {
        return `电影 #${movie.id}`
      }
      
      try {
        const url = new URL(movie.url)
        const pathParts = url.pathname.split('/')
        const filename = pathParts[pathParts.length - 1]
        if (filename && filename !== '') {
          const nameWithoutExt = filename.split('.')[0]
          return nameWithoutExt || '未知电影'
        }
      } catch (e) {
        console.log('无法从 URL 提取电影名称')
      }
      
      return '未知电影'
    },
    
    handleMovieClick(movie) {
      this.$emit('movie-click', movie)
    }
  }
}
</script>

<style lang="scss" scoped>
.movie-list-container {
  width: 100%;
}

.message-text {
  font-size: 16px;
  line-height: 1.4;
  word-wrap: break-word;
}

.movie-list {
  margin-top: 10px;
}

.movie-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  margin: 8px 0;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  cursor: pointer;
  transition: all 0.2s ease;
}

.movie-item:hover {
  background-color: #e3f2fd;
  border-color: #007aff;
}

.movie-item:active {
  transform: scale(0.98);
}

.movie-info {
  flex: 1;
}

.movie-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.3;
}

.movie-url {
  font-size: 12px;
  color: #666;
  word-break: break-all;
  line-height: 1.2;
}

.download-icon {
  margin-left: 10px;
  padding: 4px;
  border-radius: 4px;
  background-color: rgba(0, 122, 255, 0.1);
}
</style>